<template>
    <div class="body">
        <div class="head">
            <img src="../../../static/img/shop/Shopping cart 2.png">
            <div>套餐购物车</div>
        </div>
        <div style="float: right; color:gray">提示：下单成功之后可以在"个人中心->我的订单"里面查看状态</div>
        <template>
            <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%;margin-top: 10px;"
                :default-sort = "{prop: 'shopCreateTime', order: 'descending'}"
                height="360"
                @selection-change="handleSelectionChange">
                <el-table-column
                    prop="cyCombination.combinationId"
                    label="套餐id"
                    width="140"
                    >
                </el-table-column>
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    prop="cyCombination.combinationName"
                    label="套餐名"
                    width="140"
                    >
                </el-table-column>
                
                <el-table-column
                    prop="cyCombination.combinationPrice"
                    label="套餐价格"
                    sortable
                    width="100">
                </el-table-column>
                <el-table-column
                    prop="cyCombination.combinationIntro"
                    label="套餐简介"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="shopCreateTime"
                    label="加入时间"
                    sortable
                    width="160">
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="70">
                    <template slot-scope="scope">
                        <el-button @click="lookCombination(scope.row)" type="text" size="small">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin-top: 20px">
                <el-button @click="toggleSelection()">取消选择</el-button>
                <el-button @click="deleteShop()">移除该商品</el-button>
                <el-button @click="buyShop()">立即下单</el-button>
                <div class="total">合计: {{ total }}￥</div>
            </div>
        </template>

    </div>
</template>
<script>
export default {
    data(){
        return{
            tableData:[],
            multipleSelection: [],
            total:0,
            deleteId:[],
            selectName:"",
        }
    },
    created(){
        this.getShopCombination();
    },
    methods:{
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        getShopCombination(){
            this.$axios.get(
                '/shop/getShopCombination',
                {
                    params:{
                        patientId:this.$store.state.patientId
                    }
                }
            ).then(res =>{
                console.log("111",res)
                if(res != undefined){
                    this.tableData = res.data
                }
            })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            // this.total = this.total + val.cyProject.projectPrice
            this.total = 0;
            this.deleteId = [];
            this.selectName = "";
            for(let i = 0;i < val.length;i++){
                this.total = this.total + val[i].cyCombination.combinationPrice
                this.deleteId.push(val[i].shopCombinationId)
                if(i == val.length-1){
                    this.selectName = this.selectName + val[i].cyCombination.combinationName;
                }else{
                    this.selectName = this.selectName + val[i].cyCombination.combinationName + ','
                }
            }

        },
        deleteShop(){
            this.$confirm('此操作将移除该商品, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.removeShop()
            }).catch(() => {
                this.$message({
                    showClose: true,
                    type: 'info',
                    message: '已取消该操作'
                });          
            });
        },
        removeShop(){
            this.$axios.post(
                '/shop/deleteCombinationShop',
                {
                    ids:this.deleteId
                }
                
            ).then(res=>{
                if(res != undefined){
                    if(res.code == 1){
                        this.$message({
                            showClose: true,
                            type: 'success',
                            message: '操作成功!'
                        });  
                        this.getShopCombination();
                    }else{
                        this.$message.error("操作失败")
                    }
                }
                
            })
        },
        lookCombination(row){
            localStorage.setItem("combinationItem",JSON.stringify(row.cyCombination));
            this.$router.push('/menu/combination')
        },
        buyShop(){
            this.$confirm('确定下单嘛？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                if(this.$store.state.patientMoney >= this.total){
                    this.$notify({

                        title: '商品购买',
                        showClose: true,
                        message: '商品下单成功！！！待收费员确认信息之后打印体检信息',
                        type: 'success'
                    });
                    this.money();
                    this.addOrder()
                    this.removeShop()
                }else{
                    this.$message.error("当前余额不足，请充值！")
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消购买'
                });          
            });
        },
        addOrder(){
            //订单编号
            const examId = new Date().getTime()
            this.$axios.get(
                '/order/addOrder',
                {
                    params:{
                        examId:examId,
                        patientId:this.$store.state.patientId,
                        totalMoney:this.total,
                        orderInfo:this.selectName,
                        proOrCom:2,
                        adminId:4

                    }
                }
            ).then(res=>{
                console.log(res)
            })
        },
        money(){
            this.$axios.get(
                '/order/money',
                {
                    params:{
                        id:this.$store.state.patientId,
                        total:this.total
                    }
                }
            ).then(res=>{
                if(res != undefined){
                    this.$store.state.patientMoney = res.data
                }
            })
        }           
    }
}
</script>
<style scoped>
    .el-table{
        /* border: 3px solid rgb(20, 146, 51); */
        box-shadow:0 0 10px 10px #b9b9ba;
    }
    @import "../../../static/css/shop.css";
</style>